<template>
    <div class="observer-lbrary-pages">
        <compSearchCriteria
         :formItem.sync="formItem" 
         @searchHandleChange="searchHandleChange" 
         v-model="dataTableConfig.requestParams"
         ref="refSearchCriteria"
         />
         <div class="btn-box">
            <div></div>
            <a-form layout="inline">
                <a-form-item>
                    <a-button class="blue-btn" type="primary" @click="increaseClick">新增</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button class="red-btn" type="primary" @click="batchDeletion" >删除</a-button>
                </a-form-item>
        </a-form>
         </div>
         
        <div>
            <compTable
             :key="compSelectorkey" 
             :config='dataTableConfig' 
             :columns="columns" 
             :requestParamObj="requestParams" 
             @selectedRowKeys="selectedRowKeys"
             @sorterChange="sorterChange"
             >
                <template v-slot:operation="{record}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form">
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" @click="reviseClick(record)">题目编辑</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" @click="answerClick(record)">答案编辑</a-button>
                        </a-form-item>
                    </a-form>
                </template>
            </compTable>
        </div>
        <topicIncrease ref="refTopicModel" :addEditParameter="addEditParameter" @handleOk="handleOk" :cuerrfsjid="cuerrFsjid"/>
        <answerIncrease ref="refAnswerModel" :answerDetailed="answerDetailed" @answerClick="answerClick"/>
    </div>
</template>
<script>
import compSearchCriteria from '@/components/compSearchCriteria/compSearchCriteria'
import compSelector from '@/components/compSelector/compSelector'
import compTable from '@/components/compTable/compTable'
import {typeInput, typeNumber, typeSelect, typeCheckbox, typeRadio} from '@/components/compSearchCriteria/ContractType'
import assessCheckApi from './service/api.js'
import { subjectDeleteServe,editServe} from './service/index'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import topicIncrease from './topicIncrease.vue'
import answerIncrease from './answerIncrease.vue'
// import { CodeSandboxCircleFill } from '@yuncheng/ych-components'
  export default {
    name:'topicPage',
    components:{
        compSearchCriteria,
        compTable,
        topicIncrease,
        compSelector,
        answerIncrease
    },
    props:{
        isAddATopic:{
            type:Boolean,
            default:false,
            required: false,
        },
        cuerrfsjid:{
            type:String,
            default:'',
            required: false,
        }
    },
    
    data(){
        return{
            addEditParameter:{},
            addEditVisible:false,
            selectedRowKeysArr:[],//选中表格数据
            compSelectorkey:'',
            requestParams:{fsjid:''},
            formItem:[
                {
                    label: '试卷题目',
                    model: 'fsjtm',
                }

            ],
            columns: [
                {
                    title: '序号', //列头显示文字
                    dataIndex: 'fxh',
                    key: 'fxh',
                    width:50,
                },{
                    title: '试卷题目', //列头显示文字
                    dataIndex: 'fsjtm',
                    key: 'fsjtm',
                },{
                    title: '题目分数', //列头显示文字
                    dataIndex: 'ftmfs',
                    key: 'ftmfs',
                    
                },{
                    title: '题目类型', //列头显示文字
                    dataIndex: 'ftmlx',
                    key: 'ftmlx',
                },{
                    title: '操作',
                    dataIndex: 'id',
                    scopedSlots: {customRender: 'operation'}, // 自定插槽格式
                    // fixed: 'right',
                    width:200
                }
            ],
            dataTableConfig:{
                api: assessCheckApi.subjectList,
                rowKey: 'id',
                rowName: 'fsjmc',
                rowSelection: {
                    // selectedRowKeys: null,
                    // type: EselectionType.checkbox
                },
                fywflcode:'001002',
            },
            leadingOutLoading:false,
            DownloadTemplateLoading:false,
            fsjtmid:'',
            cuerrFsjid:'',
            answerDetailed:{},
            isAddATopic:this.isAddATopic,
            cuerrfsjid:this.cuerrfsjid,
        }
    },
    watch:{
        cuerrfsjid(newval,oldVal){
            //console.log('获取试卷的IDa```````````',newval)
            this.requestParams={
                fsjid:newval
            }
            this.cuerrFsjid = newval
        }
    },
    methods:{
        getTopicPageData(val){
            //console.log(val)
            this.requestParams={
                fsjid:val.cuerrfsjid
            }
            this.isAddATopic = val.isAddATopic
            this.cuerrFsjid = val.cuerrfsjid
            this.cuerrfsjid = val.cuerrfsjid
            this.compSelectorkey = Date.now()
        },
        sorterChange(val,sorter){//获取到排序的数据
            //console.log('获取到排序的数据',val,sorter)
        },
        renovateSearchTabel(){//刷新搜索、表格
            this.compSelectorkey = Date.now()
            this.$refs.refSearchCriteria.resetEvents()
        },
        searchHandleChange(val){//获取搜索数据
            if(val.resetEvents){
                this.compSelectorkey = Date.now()
            }
            this.dataTableConfig.requestParams={...val}
            this.requestParams = {...this.requestParams,...val}
        },
        selectedRowKeys(keys){//获取选中表格rowKey
            this.selectedRowKeysArr = keys
        },
        increaseClick(){//新增
            if(!this.isAddATopic){
                this.$message.warning('请先保存')
                return false
            }
            // if(!this.formState.fsjmc || !this.formState.fsjlx){
            //     this.$emit('triggerValidateForm')
            // }
            this.$refs.refTopicModel.visibleShow = true
            this.addEditParameter = {}
            this.cuerrFsjid = this.cuerrfsjid
        },
        batchDeletion(){//
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    if(that.selectedRowKeysArr.length){
                        let deleteString = that.selectedRowKeysArr.join(',')
                        subjectDeleteServe({ids:deleteString}).then(res=>{
                            if(res.code == 200){
                                that.$message.success('删除成功')
                            }else{
                                that.$message.warning(res.message)
                            }              
                            that.renovateSearchTabel()
                        })
                    }else{
                        that.$message.warning('请选择删除项')
                    }
                },
                
            });
            
            
        },
        handleOk(val,id){
            if(val && !id){
                this.renovateSearchTabel()
            }else if(val && id){
                this.currentRenovate()
            }
            
        },
        currentRenovate(){
            this.requestParams = {
                    ...this.requestParams,
                    renovate:true,
                }
        },
        //编辑
        reviseClick(val){
            this.addEditParameter = val[0]
            this.cuerrFsjid = this.cuerrfsjid
            this.$refs.refTopicModel.visibleShow = true
        },
        answerClick(val){
            //console.log('~~~~~~~~~~~~~~~~',val)
            this.answerDetailed = val[0]
            this.$refs.refAnswerModel.getAnswerData(val[0])
            this.$refs.refAnswerModel.visibleShow = true
        },
        AddHandleOk(){
            this.renovateSearchTabel()
        }
    },

  }
</script>
<style scoped>
.observer-lbrary-pages{
    background: #fff;
}
.btn-box{
    display: flex;
    justify-content: space-between;
}
.blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
}
.red-btn{
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
}

</style>